<template>
  <div class="counter-container">
    <button class="counter-button" @click="increment">
      点击次数: {{ count }}
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const increment = () => {
  count.value++
}
</script>

<style scoped>
.counter-container {
  margin: 1rem;
}
.counter-button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
}
</style>